import React, { useState } from 'react'

import { Breadcrumb, Layout, theme } from 'antd'
import HomeMenu from '@/components/menu/index'
const { Header, Content, Footer, Sider } = Layout

import { Outlet } from 'react-router-dom'

const View: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <HomeMenu />
      </Sider>
      <Layout>
        <Header
          style={{
            paddingLeft: 32,
            background: colorBgContainer,
            lineHeight: 64,
            paddingTop: 5,
          }}
        >
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
        </Header>
        <Content style={{ margin: '16px 16px 0' }} className="home-content">
          <div
            style={{
              padding: 16,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
              height: '100%',
            }}
          >
            <Outlet></Outlet>     
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
            height: 48,
            lineHeight: '48px',
            padding: 0,
          }}
        >
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}

export default View
